<template>
  <rt-view>
    <rt-header class="header">
      <rt-navbar :onBack="closePage" class="back">
        <!-- <rt-quick-search entity="account" placeholder="souyisou" /> -->
        <rt-search v-focus placeholder="按文章名称进行查询" @click="click()"></rt-search>
      </rt-navbar>
      <div class="class-btn">
        <img src="../../assets/icons/svgs/more-tow.svg" @click="moreClass()" />
      </div>
      <rt-tabs
        v-model="tabs"
        :tab-list="tabList"
        :select-color="selectColor"
        :color="color"
        :border-width="borderWidth"
        :listen-scroll="true"
        @on-item-click="tabsChange"
        ref="tabs"
        class="custom-tabs"
      />
    </rt-header>
    <rt-content>
      <rt-list ref="articalList" :fetch="getDataList" @toggle="toggle">
        <div slot-scope="{ row }" class="list_content" @click="clickToDetail(row)">
          <div class="desc">
            <div class="tille">{{ row.articName }}</div>
            <div class="footer">
              {{ row.openCount }} 阅读
              <span>·</span>
              {{ row.commentCount }} 评论
            </div>
          </div>
          <div class="imgs">
            <img :src="showRemotePic(row.imgUrl)" @error="showErrorPic($event)" />
          </div>
        </div>
      </rt-list>
    </rt-content>
    <rt-footer>
      <rt-tabbar
        :tab-list="menulist"
        v-model="menubar"
        :select-color="selectColor1"
        :color="color1"
        @on-item-click="itemChange"
      />
    </rt-footer>
  </rt-view>
</template>
<script>
export default {
  filters: {
    nameStyle(value) {
      if (!value) return '';
      var count = 28;
      if (value.length > count) {
        return value.slice(0, count) + '...';
      }
      return value;
    }
  },
  data() {
    return {
      articalId: '11111111-1111-1111-1111-111111111000',
      scroll: true,
      tabList: [
      ],
      tabs: 0,
      borderWidth: '10px',
      color: '#8B9FC6',
      selectColor: '#53A4FC',
      menulist: [
        {
          name: '文章',
          img: require('@/assets/icons/svgs/article_line.svg'),
          imgActive: require('@/assets/imgs/article_active.png')
        },
        {
          name: '活动',
          img: require('@/assets/icons/svgs/activity_line.svg'),
          imgActive: require('@/assets/imgs/activity_active.png')
        },
        {
          name: '个人中心',
          img: require('@/assets/icons/svgs/mine_line.svg'),
          imgActive: require('@/assets/imgs/mycenter_active.png')
        }
      ],
      menubar: 0,
      color1: '#8B9FC6',
      selectColor1: '#0099FF'
    };
  },
  created() {
  },
  mounted() {
    this.getAllArticleType();
  },
  methods: {
    // 点击进入搜索
    click() {
      this.$router.push({
        path: 'search-article'
      });
    },
    getDataList(page) {
      const param = {
        pageIndex: page.pageIndex,
        pageSize: page.pageSize,
        typeId: this.articalId
      };
      return new Promise(resolve => {
        rt.get(`/api/bbs/article/listarticle`, param).then(res => {
          resolve(res);
        });
      });
    },
    toggle(showHeader) {
      this.showHeader = showHeader;
      this.$refs.content.resizeStyle();
    },
    itemChange(value, item) {
      // console.log(value);
      if (value === 1) {
        this.$router.push({
          name: 'campaign-list'
        });
      } else if (value === 2) {
        this.$router.push({
          name: 'mycenter'
        });
      }
    },
    tabsChange(val, item) {
      this.articalId = item.bbs_article_typeid;
      this.$refs['articalList'].refreshData();
    },
    getAllArticleType() {
      rt.post('/api/bbs/articletype/allarticletype').then(res => {
        this.tabList = res;
      });
    },
    getArticle(id) {
      rt.get(`/api/bbs/article/listarticle/${id}`).then(res => {});
    },
    clickToDetail(row) {
      this.$router.push({
        name: 'article-detail',
        query: { id: row.articId, name: row.articName }
      });
    },
    moreClass() {
      this.$router.push({
        name: 'article-type'
      });
    },
    closePage() {
      rt.closeAppPage();
    },
    showRemotePic(name) {
      return rt.showRemotePic(name, this.SERVER_URL);
    },
    showErrorPic(e) {
      rt.showErrorPic(e);
    }
  }
};
</script>
<style lang="less" scoped>
* {
  touch-action: none;
  touch-action: pan-y;
  background: #fff;
}
.header {
  background: #fff;
}
.class-btn {
  border-radius: 1px;
  float: right;
  margin-top: -2px;
  background: #fff;
  width: 44px;
  height: 44px;
  box-shadow: 0px -1px 10px rgba(151, 151, 151, 1);
  img {
    padding-left: 25%;
    padding-top: 25%;
    width: 50%;
  }
}
.back {
  right: 10px;
  width: 103%;
}
.rt-tabs-header {
  letter-spacing: 0px;
}
</style>
